<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			ul{
				width: 50px;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left: 50%;
				margin-left: -25px;
				bottom: 20px;
			}
			
			li{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #fff;
				cursor: pointer;
			}
			
			.lunbo{
				width: 100%;
				overflow: hidden;
				position: relative;
			}
			
			.father{
				width: 300%;
				overflow: hidden;
				transition: 1s;
			}
			
			.father img{
				width: 33.33%;
				float: left;
				
			}
			
			button{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #fff;
				text-align: center;
				font-size: 30px;
				cursor: pointer;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				
			}
			
			button:nth-of-type(1){
				right: 40px;				
			}
			
			button:nth-of-type(2){
				left: 40px;				
			}
			
			button:hover{
				color: #fff;
				background: #000;
			}
			
			li.active{
				background: #000;
			}
		</style>
	</head>
	<body>
		<div class="lunbo">
			<div class="father">
				<img src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/3.jpg"/>
			</div>
			<button>></button>
			<button><</button>
			
			<ul>
				<li class="active" zhn="0"></li>
				<li zhn="1"></li>
				<li zhn="2"></li>
			</ul>
		</div>
	</body>
	
	<script type="text/javascript">
		var father=document.getElementsByClassName("father")[0];
		var buts=document.getElementsByTagName("button");
		var lis=document.getElementsByTagName("li");
		var lunbo=document.getElementsByClassName("lunbo")[0];
		var j=0;
		for(var i=0;i<buts.length;i++){
			buts[i].onclick=function(){			
				if(this.innerText==">"){
					j++;
					j==3&&(j=0);
					father.style.marginLeft="-100"*j+"%";
					for(var k=0;k<lis.length;k++){
						lis[k].className="";
					}
					lis[j].className="active";
				}else{
					j--;
					j==-1&&(j=2);
					father.style.marginLeft="-100"*j+"%";
					for(var k=0;k<lis.length;k++){
						lis[k].className="";
					}
					lis[j].className="active";
				}							
			}
			
			
		}
		
		for(var m=0;m<lis.length;m++){
			lis[m].onclick=function(){
				j=parseInt(this.getAttribute("zhn"));
				for(var k=0;k<lis.length;k++){
					lis[k].className="";
				}
				father.style.marginLeft="-100"*j+"%";
				lis[j].className="active";
			}						
		}
		
		timer=setInterval(function(){
			j++;
			j==3&&(j=0);
			for(var k=0;k<lis.length;k++){
				lis[k].className="";
			}
			father.style.marginLeft="-100"*j+"%";
			lis[j].className="active";
		},2000)
		
		lunbo.onmouseover=function(){
			clearInterval(timer);
		}
		
		lunbo.onmouseout=function(){
			timer=setInterval(function(){
			j++;
			j==3&&(j=0);
			for(var k=0;k<lis.length;k++){
				lis[k].className="";
			}
			father.style.marginLeft="-100"*j+"%";
			lis[j].className="active";
		},2000)
		}
	</script>
</html>
